<template>
  <div>
    <!--1 数据 -->
    <Card :arr="list"></Card>
    <!-- 2图表 -->
    <MyChart :info="datas"></MyChart>
  </div>
</template>

<script>
import Card from './components/Card'

import MyChart from './components/MyChart'

//5.1 首页报表接口方法
import { getDashData } from '../../api/charts'

export default {
  components: {
    Card,
    MyChart
  },
  data() {
    return {
      list: [
        {
          id: 1,
          title: '总订单',
          count: '102,400',
          icon: 'icon-wenjian',
          color: '#1296db',
          name: 'totalOrder'
        },
        {
          id: 2,
          title: '总销售额',
          count: '102,400',
          icon: 'icon-Dollar',
          color: '#d4237a',
          name: 'totalAmount'
        },
        {
          id: 3,
          title: '今日订单',
          count: '102,400',
          icon: 'icon-icon-',
          color: '#1296db',
          name: 'todayOrder'
        },
        {
          id: 4,
          title: '今日销售额',
          count: '102,400',
          icon: 'icon-renminbi',
          color: '#1afa29',
          name: 'totayAmount'
        }
      ],
      datas: {}
    }
  },
  // created() {
  //   this.getDatas()
  // },
  //当我们页面在dom创建后才能去调用接口函数,再去执行渲染dom的函数
  mounted() {
    this.getDatas()
    // this.initLine()
  },
  methods: {
    async getDatas() {
      const data = await getDashData()
      // console.log(data, 'datdada')
      this.datas = data
      this.list.forEach(item => {
        item.count = data[item.name]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.show-line {
  background-color: #fff;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
}
</style>
